<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>汉服视频播放量 - 专题大屏</title>
    <script src="../echarts.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Microsoft YaHei', 'PingFang SC', sans-serif;
            background: url('../1.jpg') no-repeat center center fixed;
            background-size: cover;
            color: #ffffff;
            overflow-x: hidden;
            padding: 15px;
            height: 100vh;
            box-sizing: border-box;
            background-color: transparent;
            font-size: 16px;
            display: flex;
            flex-direction: column;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
        
        body::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.1);
            z-index: -1;
            backdrop-filter: blur(8px);
        }
        
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 24px 40px;
            background: rgba(255, 255, 255, 0.3);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 12px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
            margin-bottom: 24px;
            animation: headerSlideIn 0.8s ease-out;
        }
        
        .header h1 {
            font-size: 32px;
            font-weight: bold;
            color: #ffffff;
            text-shadow: 0 0 20px rgba(139, 92, 246, 0.8), 0 2px 5px rgba(0, 0, 0, 0.5);
            letter-spacing: 2px;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
        
        .header .back-button {
            padding: 10px 24px;
            background: rgba(139, 92, 246, 0.2);
            border: 1px solid rgba(139, 92, 246, 0.6);
            border-radius: 8px;
            color: #ffffff;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }
        
        .header .back-button:hover {
            background: rgba(139, 92, 246, 0.4);
            transform: translateY(-2px);
            box-shadow: 0 0 20px rgba(139, 92, 246, 0.6);
        }
        
        .header .back-button::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.3), transparent);
            transition: all 0.5s ease;
        }
        
        .header .back-button:hover::before {
            left: 100%;
        }
        
        .time-filter {
            display: flex;
            justify-content: center;
            margin: 0 auto 30px;
            gap: 15px;
            max-width: 600px;
            flex-wrap: wrap;
        }
        
        .time-filter span {
            padding: 12px 32px;
            background: rgba(10, 10, 30, 0.6);
            border: 1px solid rgba(139, 92, 246, 0.4);
            border-radius: 25px;
            color: #ffffff;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 18px;
            letter-spacing: 1px;
            font-weight: 500;
            text-align: center;
            min-width: 120px;
        }
        
        .time-filter span.active,
        .time-filter span:hover {
            background: rgba(139, 92, 246, 0.4);
            color: #ffffff;
            box-shadow: 0 0 20px rgba(139, 92, 246, 0.5);
            transform: translateY(-2px);
        }
        
        .overview-section {
            margin: 0 40px 30px;
            padding: 30px;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.3);
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        }
        
        .overview-section p {
            font-size: 18px;
            line-height: 1.8;
            color: #ffffff;
            text-indent: 2em;
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
            margin-bottom: 16px;
        }
        
        .overview-section p:last-child {
            margin-bottom: 0;
        }
        
        .indicators-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
            gap: 24px;
            margin: 0 40px 30px;
        }
        
        .indicator-card {
            padding: 28px;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.3);
            border-radius: 12px;
            text-align: center;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        }
        
        .indicator-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 3px;
            background: linear-gradient(90deg, rgba(139, 92, 246, 0.6), rgba(236, 72, 153, 0.6));
        }
        
        .indicator-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 0 30px rgba(139, 92, 246, 0.4);
            border-color: rgba(139, 92, 246, 0.6);
        }
        
        .indicator-card .title {
            font-size: 16px;
            color: #ffffff;
            margin-bottom: 12px;
            letter-spacing: 1px;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
        }
        
        .indicator-card .value {
            font-size: 36px;
            font-weight: bold;
            color: #ffffff;
            margin-bottom: 10px;
            text-shadow: 0 0 15px rgba(139, 92, 246, 0.8), 0 2px 5px rgba(0, 0, 0, 0.5);
        }
        
        .indicator-card .change {
            font-size: 14px;
            color: #00ff99;
            font-weight: 500;
        }
        
        .charts-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(580px, 1fr));
            gap: 28px;
            margin: 0 40px 40px;
        }
        
        .chart-section {
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.3);
            border-radius: 12px;
            padding: 28px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
            display: flex;
            flex-direction: column;
            gap: 20px;
        }
        
        .chart {
            width: 100%;
            height: 350px;
            min-height: 300px;
            margin-bottom: 20px;
        }
        
        .chart-interpretation {
            background: rgba(139, 92, 246, 0.05);
            border: 1px solid rgba(139, 92, 246, 0.3);
            border-radius: 8px;
            padding: 20px;
            margin-top: 20px;
        }
        
        .chart-interpretation h3 {
            color: #ffffff;
            font-size: 20px;
            margin-bottom: 15px;
            text-shadow: 0 0 10px rgba(139, 92, 246, 0.6);
            border-bottom: 1px solid rgba(139, 92, 246, 0.3);
            padding-bottom: 10px;
        }
        
        .chart-interpretation p {
            color: #ffffff;
            font-size: 16px;
            line-height: 1.8;
            margin-bottom: 8px;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
        }
        
        .table-section h2 {
            font-size: 24px;
            margin-bottom: 25px;
            color: #ffffff;
            text-shadow: 0 0 15px rgba(139, 92, 246, 0.8), 0 2px 5px rgba(0, 0, 0, 0.5);
            padding-bottom: 15px;
            border-bottom: 2px solid rgba(139, 92, 246, 0.5);
            font-weight: 600;
        }
        
        .chart-section h2 {
            font-size: 24px;
            margin: 0 0 25px 0;
            color: #ffffff;
            text-shadow: 0 0 15px rgba(139, 92, 246, 0.8), 0 2px 5px rgba(0, 0, 0, 0.5);
            padding-bottom: 15px;
            border-bottom: 2px solid rgba(139, 92, 246, 0.5);
            font-weight: 600;
            text-align: center;
        }
        
        .data-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 16px;
        }
        
        .data-table th {
            text-align: left;
            padding: 15px;
            background: rgba(139, 92, 246, 0.2);
            border-bottom: 2px solid rgba(139, 92, 246, 0.5);
            color: #ffffff;
            font-weight: 600;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
        }
        
        .data-table td {
            padding: 15px;
            border-bottom: 1px solid rgba(139, 92, 246, 0.3);
            color: #ffffff;
            transition: all 0.3s ease;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
        }
        
        .data-table tr:hover td {
            background: rgba(139, 92, 246, 0.1);
            color: #ffffff;
            transform: translateX(5px);
        }
        
        .data-table tr:last-child td {
            border-bottom: none;
        }
        
        /* 动画效果 */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        @keyframes headerSlideIn {
            from {
                opacity: 0;
                transform: translateY(-20px) translateX(-20px);
            }
            to {
                opacity: 1;
                transform: translateY(0) translateX(0);
            }
        }
        
        .fade-in-up {
            animation: fadeInUp 0.8s ease-out;
        }
        
        /* 响应式设计优化 */
        @media (max-width: 1400px) {
            .indicators-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            
            .charts-container {
                grid-template-columns: 1fr;
            }
        }
        
        @media (max-width: 992px) {
            .header {
                padding: 20px 30px;
            }
            
            .header h1 {
                font-size: 28px;
            }
            
            .overview-section,
            .indicators-grid,
            .charts-container {
                margin: 0 25px;
            }
        }
        
        @media (max-width: 768px) {
            body {
                padding: 10px;
            }
            
            .header {
                flex-direction: column;
                gap: 15px;
                padding: 15px 20px;
            }
            
            .header h1 {
                font-size: 24px;
                text-align: center;
            }
            
            .overview-section,
            .indicators-grid,
            .charts-container {
                margin: 0 15px;
            }
            
            .overview-section {
                padding: 20px;
            }
            
            .overview-section p {
                font-size: 16px;
            }
            
            .indicators-grid {
                grid-template-columns: 1fr;
                gap: 16px;
            }
            
            .indicator-card {
                padding: 20px;
            }
            
            .chart-section {
                padding: 20px;
            }
        }
        
        @media (max-width: 480px) {
            .indicator-card .value {
                font-size: 28px;
            }
            
            .chart {
                height: 280px;
            }
            
            .chart-interpretation p {
                font-size: 14px;
            }
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>汉服视频播放量分析</h1>
        <button class="back-button" onclick="window.location.href='../hanfu-dashboard.html'">返回主大屏</button>
    </div>
    
    <div class="time-filter">
        <span class="active" data-period="30">近30天</span>
        <span data-period="90">近90天</span>
        <span data-period="365">近1年</span>
    </div>
    
    <div class="overview-section fade-in-up">
        <p>汉服视频播放量数据分析展示了汉服文化在各大视频平台的传播情况和用户关注度。数据显示，汉服相关视频内容持续受到年轻群体的青睐，特别是唐制、明制汉服的展示和教学视频最受欢迎。</p>
        <p>从总体趋势来看，汉服内容的播放量呈现持续增长态势，近30天同比增长达到38.5%，表明传统文化内容正在获得更广泛的关注。平均观看时长维持在4.8分钟左右，互动率超过12%，远高于平台平均水平，说明用户对汉服内容的参与度和粘性较高。</p>
        <p>平台分布方面，短视频平台仍然占据主导地位，但B站在专业教学和文化科普类内容上具有明显优势。值得注意的是，小红书平台虽然总播放量不及其他平台，但其增长率最高，达到52.6%，反映出图文结合平台在汉服文化传播中的潜力正在显现。</p>
    </div>
    
    <div class="indicators-grid">
        <div class="indicator-card fade-in-up" style="animation-delay: 0.1s">
            <div class="title">总播放量</div>
            <div class="value">8.6 亿</div>
            <div class="change">同比增长 38.5%</div>
        </div>
        <div class="indicator-card fade-in-up" style="animation-delay: 0.2s">
            <div class="title">平均观看时长</div>
            <div class="value">4.8 分钟</div>
            <div class="change">环比增长 5.2%</div>
        </div>
        <div class="indicator-card fade-in-up" style="animation-delay: 0.3s">
            <div class="title">互动率</div>
            <div class="value">12.3%</div>
            <div class="change">同比增长 2.1%</div>
        </div>
        <div class="indicator-card fade-in-up" style="animation-delay: 0.4s">
            <div class="title">视频总数</div>
            <div class="value">3.2 万个</div>
            <div class="change">同比增长 45.8%</div>
        </div>
    </div>
    
    <div class="charts-container">
        <div class="chart-section fade-in-up">
            <h2>平台播放量分布</h2>
            <div id="platformChart" class="chart"></div>
            <div class="chart-interpretation">
                <h3>数据解读</h3>
                <p>• 抖音以52.3%的市场份额领先，短视频形式更适合汉服展示类内容的传播</p>
                <p>• B站虽然播放量占比24.4%，但用户粘性和深度互动最强，专业内容更受欢迎</p>
                <p>• 小红书平台增长率最高(52.6%)，图文+短视频的混合形式为汉服文化传播提供新途径</p>
                <p>• 各平台呈现差异化发展趋势，内容创作者应根据平台特性制作适配内容</p>
            </div>
        </div>
        
        <div class="chart-section fade-in-up">
            <h2>热门视频榜单</h2>
            <div id="topVideoChart" class="chart"></div>
            <div class="chart-interpretation">
                <h3>数据解读</h3>
                <p>• 教程类内容占据热门榜单前列，说明实用性内容最受用户青睐</p>
                <p>• 唐制汉服相关内容播放量最高，反映出当前汉服流行趋势</p>
                <p>• 点赞数与播放量呈现强相关性，但文化科普类内容互动转化率更高</p>
                <p>• 制作工艺类内容虽排名第四，但专业性强，用户忠诚度高</p>
            </div>
        </div>
    </div>
    
    <script>
        // 图表初始化和数据
        let platformChart, topVideoChart;
        
        // 初始化平台播放量分布图表
        function initPlatformChart() {
            platformChart = echarts.init(document.getElementById('platformChart'));
            const option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    },
                    backgroundColor: 'rgba(0, 0, 0, 0.7)',
                    borderColor: '#8B5CF6',
                    textStyle: {
                        color: '#ffffff',
                        fontSize: 16
                    }
                },
                legend: {
                    data: ['播放量', '增长率'],
                    textStyle: {
                        color: '#ffffff',
                        fontSize: 16
                    },
                    top: '5%'
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: ['抖音', 'B站', '快手', '小红书'],
                    axisLine: {
                        lineStyle: {
                            color: '#ffffff'
                        }
                    },
                    axisLabel: {
                        color: '#ffffff',
                        fontSize: 16
                    }
                },
                yAxis: [
                    {
                        type: 'value',
                        name: '播放量(亿)',
                        nameTextStyle: {
                            color: '#ffffff',
                            fontSize: 16
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#ffffff'
                            }
                        },
                        axisLabel: {
                            color: '#ffffff',
                            fontSize: 16,
                            formatter: '{value} 亿'
                        },
                        splitLine: {
                            lineStyle: {
                                color: 'rgba(255, 255, 255, 0.2)'
                            }
                        }
                    },
                    {
                        type: 'value',
                        name: '增长率(%)',
                        nameTextStyle: {
                            color: '#ffffff',
                            fontSize: 16
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#ffffff'
                            }
                        },
                        axisLabel: {
                            color: '#ffffff',
                            fontSize: 16,
                            formatter: '{value}%'
                        },
                        splitLine: {
                            show: false
                        }
                    }
                ],
                series: [
                    {
                        name: '播放量',
                        type: 'bar',
                        data: [4.5, 2.1, 1.2, 0.8],
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: '#8B5CF6' },
                                { offset: 1, color: '#6366F1' }
                            ]),
                            borderRadius: [5, 5, 0, 0]
                        },
                        emphasis: {
                            itemStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    { offset: 0, color: '#A78BFA' },
                                    { offset: 1, color: '#818CF8' }
                                ])
                            }
                        },
                        label: {
                            show: true,
                            position: 'top',
                            color: '#ffffff',
                            fontSize: 14,
                            formatter: '{c} 亿'
                        }
                    },
                    {
                        name: '增长率',
                        type: 'line',
                        yAxisIndex: 1,
                        data: [41.2, 35.8, 32.5, 52.6],
                        itemStyle: {
                            color: '#EC4899'
                        },
                        lineStyle: {
                            width: 4,
                            color: '#EC4899'
                        },
                        symbol: 'circle',
                        symbolSize: 10,
                        emphasis: {
                            itemStyle: {
                                color: '#F472B6',
                                borderColor: '#ffffff',
                                borderWidth: 3
                            }
                        },
                        label: {
                            show: true,
                            position: 'top',
                            color: '#ffffff',
                            fontSize: 14,
                            formatter: '{c}%'
                        }
                    }
                ]
            };
            platformChart.setOption(option);
        }
        
        // 初始化热门视频榜单图表
        function initTopVideoChart() {
            topVideoChart = echarts.init(document.getElementById('topVideoChart'));
            const option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    },
                    backgroundColor: 'rgba(0, 0, 0, 0.7)',
                    borderColor: '#8B5CF6',
                    textStyle: {
                        color: '#ffffff',
                        fontSize: 16
                    },
                    formatter: function(params) {
                        let result = params[0].name + '<br/>';
                        params.forEach(param => {
                            result += param.marker + param.seriesName + ': ' + param.value + ' 万<br/>';
                        });
                        return result;
                    }
                },
                legend: {
                    data: ['播放量', '点赞数'],
                    textStyle: {
                        color: '#ffffff',
                        fontSize: 16
                    },
                    top: '5%'
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                    axisLine: {
                        lineStyle: {
                            color: '#ffffff'
                        }
                    },
                    axisLabel: {
                        color: '#ffffff',
                        fontSize: 14,
                        formatter: '{value} 万'
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(255, 255, 255, 0.2)'
                        }
                    }
                },
                yAxis: {
                    type: 'category',
                    data: [
                        '汉服文化小知识：衣领的讲究',
                        '汉服制作工艺大揭秘',
                        '汉服妆容教程：古风新娘妆',
                        '明制汉服复原展示',
                        '汉服穿搭教程：唐制齐胸襦裙'
                    ].reverse(),
                    axisLine: {
                        lineStyle: {
                            color: '#ffffff'
                        }
                    },
                    axisLabel: {
                        color: '#ffffff',
                        fontSize: 14,
                        interval: 0,
                        formatter: function(value) {
                            return value.length > 12 ? value.substring(0, 12) + '...' : value;
                        }
                    }
                },
                series: [
                    {
                        name: '播放量',
                        type: 'bar',
                        data: [1432, 1654, 1987, 2342, 2856].reverse(),
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                                { offset: 0, color: '#10B981' },
                                { offset: 1, color: '#34D399' }
                            ]),
                            borderRadius: [0, 5, 5, 0]
                        },
                        emphasis: {
                            itemStyle: {
                                color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                                    { offset: 0, color: '#34D399' },
                                    { offset: 1, color: '#6EE7B7' }
                                ])
                            }
                        }
                    },
                    {
                        name: '点赞数',
                        type: 'bar',
                        data: [87, 98, 115, 132, 158].reverse(),
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                                { offset: 0, color: '#F59E0B' },
                                { offset: 1, color: '#FBBF24' }
                            ]),
                            borderRadius: [0, 5, 5, 0]
                        },
                        emphasis: {
                            itemStyle: {
                                color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                                    { offset: 0, color: '#FBBF24' },
                                    { offset: 1, color: '#FDE68A' }
                                ])
                            }
                        }
                    }
                ]
            };
            topVideoChart.setOption(option);
        }
        
        // 时间周期切换
        document.querySelectorAll('.time-filter span').forEach(span => {
            span.addEventListener('click', function() {
                document.querySelectorAll('.time-filter span').forEach(s => s.classList.remove('active'));
                this.classList.add('active');
                updateChartsByPeriod(this.dataset.period);
            });
        });
        
        // 不同时间段的数据
        const chartData = {
            '30': {
                indicators: {
                    totalViews: '8.6 亿',
                    avgWatchTime: '4.8 分钟',
                    interactionRate: '12.3%',
                    videoCount: '3.2 万个',
                    totalViewsChange: '同比增长 38.5%',
                    avgWatchTimeChange: '环比增长 5.2%',
                    interactionRateChange: '同比增长 2.1%',
                    videoCountChange: '同比增长 45.8%'
                },
                platformData: {
                    views: [4.5, 2.1, 1.2, 0.8],
                    growth: [41.2, 35.8, 32.5, 52.6]
                },
                topVideosData: {
                    views: [1432, 1654, 1987, 2342, 2856].reverse(),
                    likes: [87, 98, 115, 132, 158].reverse()
                }
            },
            '60': {
                indicators: {
                    totalViews: '16.3 亿',
                    avgWatchTime: '4.6 分钟',
                    interactionRate: '11.8%',
                    videoCount: '5.8 万个',
                    totalViewsChange: '同比增长 36.2%',
                    avgWatchTimeChange: '环比增长 4.8%',
                    interactionRateChange: '同比增长 1.9%',
                    videoCountChange: '同比增长 42.5%'
                },
                platformData: {
                    views: [8.7, 3.9, 2.2, 1.5],
                    growth: [39.8, 34.2, 30.1, 50.3]
                },
                topVideosData: {
                    views: [2654, 3021, 3789, 4432, 5217].reverse(),
                    likes: [162, 185, 219, 250, 298].reverse()
                }
            },
            '90': {
                indicators: {
                    totalViews: '23.7 亿',
                    avgWatchTime: '4.5 分钟',
                    interactionRate: '11.5%',
                    videoCount: '8.3 万个',
                    totalViewsChange: '同比增长 34.8%',
                    avgWatchTimeChange: '环比增长 4.5%',
                    interactionRateChange: '同比增长 1.8%',
                    videoCountChange: '同比增长 40.2%'
                },
                platformData: {
                    views: [12.5, 5.6, 3.2, 2.4],
                    growth: [38.5, 32.9, 29.3, 48.7]
                },
                topVideosData: {
                    views: [3876, 4352, 5210, 6287, 7345].reverse(),
                    likes: [235, 267, 302, 356, 412].reverse()
                }
            },
            '365': {
                indicators: {
                    totalViews: '92.8 亿',
                    avgWatchTime: '4.3 分钟',
                    interactionRate: '10.7%',
                    videoCount: '31.5 万个',
                    totalViewsChange: '同比增长 32.1%',
                    avgWatchTimeChange: '环比增长 3.8%',
                    interactionRateChange: '同比增长 1.5%',
                    videoCountChange: '同比增长 37.6%'
                },
                platformData: {
                    views: [48.2, 21.8, 12.5, 10.3],
                    growth: [36.2, 30.5, 28.1, 45.9]
                },
                topVideosData: {
                    views: [15234, 17890, 20567, 23876, 28934].reverse(),
                    likes: [923, 1056, 1215, 1487, 1782].reverse()
                }
            }
        };
        
        // 更新核心指标数据
        function updateIndicators(period) {
            const data = chartData[period].indicators;
            const indicators = document.querySelectorAll('.indicator-card');
            
            indicators[0].querySelector('.value').textContent = data.totalViews;
            indicators[0].querySelector('.change').textContent = data.totalViewsChange;
            
            indicators[1].querySelector('.value').textContent = data.avgWatchTime;
            indicators[1].querySelector('.change').textContent = data.avgWatchTimeChange;
            
            indicators[2].querySelector('.value').textContent = data.interactionRate;
            indicators[2].querySelector('.change').textContent = data.interactionRateChange;
            
            indicators[3].querySelector('.value').textContent = data.videoCount;
            indicators[3].querySelector('.change').textContent = data.videoCountChange;
        }
        
        // 更新平台播放量图表
        function updatePlatformChart(period) {
            const data = chartData[period].platformData;
            platformChart.setOption({
                series: [
                    {
                        name: '播放量',
                        data: data.views
                    },
                    {
                        name: '增长率',
                        data: data.growth
                    }
                ]
            });
        }
        
        // 更新热门视频图表
        function updateTopVideoChart(period) {
            const data = chartData[period].topVideosData;
            topVideoChart.setOption({
                series: [
                    {
                        name: '播放量',
                        data: data.views
                    },
                    {
                        name: '点赞数',
                        data: data.likes
                    }
                ]
            });
        }
        
        // 根据时间段更新所有数据
        function updateChartsByPeriod(period) {
            console.log('更新数据周期:', period, '天');
            
            // 添加数据加载动画效果
            const elements = document.querySelectorAll('.indicator-card, .chart-section');
            elements.forEach(el => {
                el.style.opacity = '0.5';
                el.style.transform = 'scale(0.98)';
                el.style.transition = 'all 0.3s ease';
            });
            
            // 延迟更新数据，模拟加载过程
            setTimeout(() => {
                updateIndicators(period);
                updatePlatformChart(period);
                updateTopVideoChart(period);
                
                // 恢复显示状态
                elements.forEach(el => {
                    el.style.opacity = '1';
                    el.style.transform = 'scale(1)';
                });
            }, 300);
        }
        
        // 添加页面载入动画
        window.addEventListener('load', function() {
            const elements = document.querySelectorAll('.fade-in-up');
            elements.forEach((el, index) => {
                el.style.animationDelay = (index * 0.1) + 's';
                el.style.opacity = '1';
            });
            
            // 初始化图表
            initPlatformChart();
            initTopVideoChart();
        });
        
        // 响应式调整
        window.addEventListener('resize', function() {
            if (platformChart) platformChart.resize();
            if (topVideoChart) topVideoChart.resize();
        });
    </script>
</body>
</html>